<template>
  <div class="container" :class="'type-' + info.applyStatus">
    <div class="title-bar text-align-c">
      <h2 class="font-18 flex-center flex v-align-c">
        <span></span>
        <i v-if="info.applyStatus === 0">申请审核中</i>
        <i v-else-if="info.applyStatus === 1">申请已通过</i>
        <i v-else-if="info.applyStatus === 2">审核未通过</i>
        <span></span>
      </h2>
      <p class="font-12">提交于{{ info.createTime }}</p>
    </div>
    <div v-if="info.applyStatus === 2" class="mar-l-15 mar-r-15 mar-t-1 fail-box">
      <p v-if="info.reject">拒绝原因: {{ info.reject }}</p>
      <button size="default" class="primary-button" @click="$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main?applyId=' + info.applyId})">重新提交</button>
    </div>
    <div class="mar-l-15 mar-r-15 main-desc">
      <div class="pad-t-23 pad-b-15">
        <van-tabs :active="activeIndex" @change="tabClick" color="#333333" :border="false">
          <div v-for="(item, index) in tabData" :key="index">
            <van-tab :title="item" title-style="font-size:32rpx;"></van-tab>
          </div>
        </van-tabs>
      </div>
      <div v-if="!activeIndex">
        <ul class="detail-info mar-l-15 mar-r-15 mar-t--13 pad-b-15">
          <li>
            <span>店播申请号：</span>
            <div>{{ info.applyCode }}</div>
          </li>
          <li>
            <span>申请时间：</span>
            <div>{{ info.createTime }}</div>
          </li>
          <li>
            <span>直播标题：</span>
            <div>{{ info.roomName }}</div>
          </li>
          <li>
            <span>计划开播时间：</span>
            <div>{{ info.startDate }}</div>
          </li>
          <li>
            <span>计划结束时间：</span>
            <div>{{ info.endDate }}</div>
          </li>
          <li>
            <span>主播昵称：</span>
            <div>{{ info.anchorName }}</div>
          </li>
          <li>
            <span>主播微信号：</span>
            <div>{{ info.anchorWechat }}</div>
          </li>
          <li>
            <span>分享卡片封面：</span>
            <div><img v-if="info.coverImg" :src="info.coverImg" class="bc-img" mode="widthFix"
              @click="$pt.previewImage({urls: [info.coverImg]})" alt=""></div>
          </li>
          <li>
            <span>直播卡片封面：</span>
            <div><img v-if="info.feedsImg" :src="info.feedsImg" class="bc-img" mode="widthFix"
              @click="$pt.previewImage({urls: [info.feedsImg]})" alt=""></div>
          </li>
          <li>
            <span>直播间背景墙：</span>
            <div><img v-if="info.shareImg" :src="info.shareImg" class="bc-img" mode="widthFix"
              @click="$pt.previewImage({urls: [info.shareImg]})" alt=""></div>
          </li>
          <li v-if="info.introduceVideo">
            <span>视频介绍：</span>
            <div>
              <div class="width-100 height-100 pos-rel">
                <div class="width-100 height-100 absolute-img" @click="fileVideo = true"></div>               
                <video :src="info.introduceVideo"  class="width-100 height-100" :controls="false"></video>
              </div>
              <div v-if="fileVideo" class="video-layer" catchtouchmove="true">
                <img v-if="fileSpace" :src="fileSpace + '/images/layer-close.png'" alt=""
                  @click="fileVideo = false" class="width-26 height-26">
                <video :src="info.introduceVideo" autoplay="autoplay" controls="controls"></video>
              </div>
            </div>
          </li>
          <li>
            <span>直播功能：</span>
            <div>{{ !info.closeComment ? '评论、' : ''  }} {{ !info.closeLike ? '点赞、' : '' }} {{ !info.closeGoods ? '商品货架' : ''  }} </div>
          </li>
        </ul>
      </div>
      <div v-else>
        <ul v-for="(itemGoods, indexGoods) in info.liveRoomApplyGoodsList" :key="indexGoods"
          class="detail-goods mar-l-15 mar-r-15 mar-t--3">
          <li class="mar-b-12">
            <div class="flex">
              <img v-if="itemGoods.goodsImgUrl" :src="itemGoods.goodsImgUrl" class="width-85 height-85 mar-r-10 goods-img" alt="">
              <div class="flex-item">
                <h3 class="font-13">{{ itemGoods.title }}</h3>
                <div class="goods-price font-15 mar-t-20">
                  <template v-if="!itemGoods.maxPrice">￥{{ itemGoods.price }}</template>
                  <template v-else>
                    ￥{{ itemGoods.minPrice }}~￥{{ itemGoods.maxPrice }}
                  </template>
                </div>                  
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { getLiveRoomApply } from '@/api/personal'
  export default {
    data() {
      return {
        activeIndex: 0,
        tabData: ['基本信息', '商品信息'],
        info: {},
        fileVideo: false
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      this.getLiveRoomApply(this.getCurrentPage().query.applyId)
    },
    methods: {
      tabClick(index) {
        this.activeIndex = index.mp.detail.index
      },
      getLiveRoomApply(applyId) {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
        this.info = {}
        getLiveRoomApply({
          applyId: applyId
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          this.info = response.data
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container {
  background: #fafafa;
  min-height: calc(100vh);
  overflow: hidden;
  .absolute-img{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .video-layer{
    &:after{
      content: '';
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      background: rgba(0, 0, 0, 0.5);
    }
    img{
      position: fixed;
      right: 15px;
      top: 15px;
      z-index: 102;
    }
    video{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 101;
    }    
  }
  &.type-0{
    background: #fffae1;
    h2{
      color: #E2A500;
      span{
        background-position: 0 0!important;
      }
    }
    p{
      color: #E2A500;
    }
  }
  &.type-1{
    background: #e2f6df;
    h2{
      color: #35930D;
      span{
        background-position: -12px 0!important;
      }
    }
    p{
      color: #35930D;
    }
  }
  &.type-2{
    background: #efefef;
    h2{
      color: #82828D;
      span{
        background-position: -24px 0!important;
      }
    }
    p{
      color: #82828D;
    }
  }
  .fail-box{
    background: #fe705d;
    border-radius: 8px;
    padding: 10px 15px;
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    p{
      color: #fff;
      font-size: 15px;
    }
    .primary-button{
      float: right;
      font-size: 13px;
      margin-top: 20px;
      padding: 0px 18px;
      border-radius: 50px;
      line-height: 2.2;
      background: #fff;
      border: #fff 1px solid;
      color: #FE705D;
    }
  }
  .title-bar{
    h2{
      padding-top: 16px;
      margin-bottom: -3px;
      span{
        width: 10px;
        height: 10px;
        background: url('https://veekrayimg.joinsun.vip/images/point-img-lr.png') no-repeat center;
        background-size: 34px 10px!important;
      }
      i{
        padding: 0 5px;
      }
    }
    p{
      padding-bottom: 18px;
    }
  }
  .main-desc{
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    /deep/ .van-tabs__nav{
      background-color: #f8f8f8;
      .van-tab {
        line-height: 38px;
        background-color: #f8f8f8;
      }
    }
  }
  .detail-info{
    li{
      padding: 4px 0;
      span{
        display: inline-block;
        vertical-align: top;
        width: 106px;
        color: #999;
        font-size: 15px;
      }
      div{
        display: inline-block;
      }
    }
  }
  .detail-goods{
    .goods-img{
      border-radius: 8px;
    }
    h3{
      height: 38px;
      line-height: 1.5;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .goods-price{
      color: #E84747;
    }
  }
  .bc-img {
    width: 100px;
  }  
}
</style>
